<template>
  <Detail-dialog
    modal
    showReset
    width="60"
    :title="title"
    :show.sync="dialogShow" @close="close" @save="save" @reset="reset">
        <div style="margin-bottom:10px">
      <label>{{this.employeeInfo.employeeName||'员工'}}主职位：</label>
      <el-select v-model="mainPosition" placeholder="选择员工主职位">
        <el-option v-for="(item,index) in selectInfoList" :key="index" :value="item[defaultProps.key]" :label="item[defaultProps.label]"></el-option>
      </el-select>
    </div>
    <div style="text-align: center">
      <el-transfer
      style="text-align: left;display: flex;flex-direction: row;justify-content: space-around;"
      v-model="rightData"
      filterable
      target-order='push'
      :props="defaultProps"
      :right-default-checked="rightData"
      :titles="['公司职位', (employeeInfo.employeeName||'员工')+'职位']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @right-check-change="handleChange"
      :data="dataInfo">
      <el-tooltip slot-scope="{ option }" class="item" effect="light" :content="option[defaultProps.label]+'('+option[defaultProps.desc]+')'" placement="bottom-start">
          <span>{{ option[defaultProps.label]}}({{ option[defaultProps.desc] }})</span>
      </el-tooltip>
    </el-transfer>
    </div>
  </Detail-dialog>
</template>
<script>
import DetailDialog from '@/components/DetailDialog'
import employee from '@/api/system/employeeAPI'
import position from '@/api/system/positionAPI'
export default {
  props: {
    title: String,
    visible: Boolean,
    data: {type: Object,
      default: () => {
        return {}
      }},
    defaultProps: {type: Object,
      default: () => {
        return {
          key: 'positionCode',
          label: 'positionName',
          desc: 'departmentName'
        }
      }}
  },
  components: {DetailDialog},
  watch: {
    visible: {
      handler (val) {
        this.dialogShow = val
        this.getPositionList().then(res => {
          if (this.data && this.data.employeeCode) {
            this.getEmployeePosition(this.data.employeeCode)
          }
        })
      },
      immediate: true
    },
    dialogShow (val) {
      this.$emit('update:visible', val)
    },
    data: {
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          this.employeeInfo = {...val}
        }
      },
      deep: true,
      immediate: true
    },
    rightData: {
      handler (val) {
        this.selectInfoList = this.getSelectObject(val)
      },
      deep: true,
      immediate: true
    },
    selectInfoList: {
      handler (val) {
        this.mainPosition = this.getDefaultMainPostion(val)
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      dialogShow: false,
      positionInfo: {},
      employeeInfo: [],
      dataInfo: [],
      rightData: [],
      selectInfoList: [],
      employeePositionList: [],
      mainPosition: ''
      // renderFunc (h, option) {
      //   return <span title={option['positionName'] + '(' + option['departmentName'] + ')'}>{option['positionName']}({option['departmentName']})</span>
      // }
    }
  },
  methods: {
    close () {
      this.dialogShow = false
    },
    handleChange (value, selectKey) {
      this.rightData = value
      console.log(value, selectKey)
    },
    getSelectObject (selectKeys) {
      if (selectKeys && selectKeys.length > 0 && this.dataInfo && this.dataInfo.length > 0) {
        return selectKeys.map(v => {
          return this.dataInfo.find(item => {
            return v === item[this.defaultProps.key]
          })
        })
      }
    },
    getDefaultMainPostion (selectInfoList) {
      if (selectInfoList && selectInfoList.length > 0) {
        for (let index = 0; index < selectInfoList.length; index++) {
          const element = selectInfoList[index]
          if (this.employeePositionList && this.employeePositionList.length > 0) {
            const defaultMain = this.employeePositionList.find(v => {
              return v.mainPosition === 1 && v[this.defaultProps.key] === element[this.defaultProps.key]
            })
            if (defaultMain) {
              return element[this.defaultProps.key]
            }
          }
        }
        return selectInfoList[0][this.defaultProps.key]
      }
    },
    getPositionList  (param) {
      return new Promise((resolve, reject) => {
        position.getPositionListAPI(param).then(res => {
          this.dataInfo = res.data || []
          resolve(res)
        })
      })
    },
    getEmployeePosition (employeeCode) {
      employee.getEmployeePositionAPI({employeeCode}).then(res => {
        if (res.data && res.data.length > 0) {
          this.employeePositionList = [...res.data]
          this.rightData = res.data.map(v => {
            return v.positionCode
          })
        }
      })
    },
    reset () {
      if (this.employeePositionList && this.employeePositionList.length > 0) {
        this.rightData = this.employeePositionList.map(v => {
          return v[this.defaultProps.key]
        })
      } else {
        this.rightData = []
      }
    },
    save () {
      if (!this.employeeInfo.employeeCode) {
        this.$msgBox.error('员工信息不存在')
        return
      }
      let positionList = []
      if (this.rightData && this.rightData.length > 0) {
        positionList = this.rightData.map(v => {
          const p = {positionCode: v}
          if (this.mainPosition && v === this.mainPosition) {
            p.mainPosition = 1
          } else {
            p.mainPosition = 0
          }
          return p
        })
      }
      const param = {}
      param.employeeCode = this.employeeInfo.employeeCode
      param.positionInfoList = positionList
      if (positionList.length <= 0) {
        this.$msgBox.confirm('确认清空员工的所有职位', () => {
          employee.saveOrUpdateEmployeeAPI(param).then(res => {
            this.close()
            this.$emit('afterSave', res)
          })
        }, null, '警告')
      } else {
        employee.saveOrUpdateEmployeeAPI(param).then(res => {
          this.close()
          this.$emit('afterSave', res)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.position-desc{
  padding: 10px;
  font-weight: 600;
}
>>>.el-transfer__buttons{
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   .el-button{
      margin: 0;
      border-radius: 50%;
      padding: 12px;
   }

}
>>>.el-transfer__button:nth-of-type(1){
  display: none;
}
</style>
